<template>
	<view class="main">
		<u-navbar :title="$t('transferGift.title')" :autoBack="true" bgColor="#292929" leftIconColor="#FFFFFF"
			:titleStyle="{color:'#FFFFFF',fontSize:'32rpx'}" />
			<u-icon class="list-icon" name="file-text" color="#926FBF" size="28" @click="toshowList" />
		<view class="head-box">
			<view class="image-avatar">
				<image :src="userInfo.avatar?userInfo.avatar:'../../static/morentouxiang.png'" mode="scaleToFill"
					class="headimg" />
				<text class="name" v-show="userInfo.name">{{userInfo.name+' '+userInfo.surname}}</text>
				<text class="id-name">id:{{userInfo.id}}</text>
			</view>
			<view class="line"></view>
			<view class="right-text" v-if="!showOther">
				<text>{{$t('transferGift.tips')}}</text>
			</view>
			<view class="image-avatar" v-else>
				<image :src="touserInfo.avatar?touserInfo.avatar:'../../static/morentouxiang.png'" mode="scaleToFill"
					class="headimg" />
				<text class="name">{{touserInfo.name+' '+touserInfo.surname}}</text>
				<text class="id-name">id:{{touserInfo.id}}</text>
			</view>
		</view>
		<input type="number" v-model="transferInfo.userId" :placeholder="$t('transferGift.id')" class="input-border input-box" />
		<button class="bth-box color1" @click="checkUser">{{$t('transferGift.search')}}</button>
		<input type="number" :placeholder="$t('transferGift.input')" v-model="transferInfo.total"
			class="input-border  input-box" />
		<button class="bth-box color2" @click="sureConfirm">{{$t('gaming.rule2')}}</button>
		<u-popup :show="show" @close="show=false" round="65" mode="center">
			<view class="popbox">
				<view class="pop-false" v-if="!showTrue">
					<image src="../../static/warning.png" mode="widthFix" class="false-image" />
					<text class="warning-text">{{$t('transferGift.fail')}}</text>
					<button class="popbth bth-color1" @click="show=false">{{$t('transferGift.cancel')}}</button>
					<button class="popbth bth-color2" @click="toNavigate('authentication/authentication')">{{$t('transferGift.bth')}}</button>
				</view>
				<view class="pop-true" v-else>
					<text class="poptitle">{{$t('transferGift.success')}}</text>
					<view class="center-pop">
						<image class="grimage" src="../../static/gold.png" mode="widthFix" />
						<view class="transfer">
							<text>Transfer</text>
							<text class="nums">{{successMoney}}</text>
						</view>
					</view>
					<button class="popbth" @click="show=false">{{$t('gaming.rule2')}}</button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showList" @close="showList=false" round="15" mode="center">
		   <view class="popbox1">
		       <u-subsection activeColor="#926FBF" bgColor="#926FBF" inactiveColor="#fff" :list="list" :current="type" @change="tabsChange"></u-subsection>
		       <view class="msg-title">
					<text style="text-align: left;">ID:</text>
					<text>amount</text>
					<text>createTime</text>
		       </view>
			   <scroll-view scroll-y="true" class="scroll-y">
		       	<view class="msg-box input-border" v-for="item in transferTable" :key="item.id">
		       		<text style="text-align: left;">ID:{{item.userId}}</text>
		       		<text class="color-red">{{item.amount}}</text>
		       		<text>{{$u.timeFormat(item.createTime, 'yyyy/mm/dd')}}</text>
		       	</view>
		       </scroll-view>
		   </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				touserInfo: {},
				transferTable:[],
				successMoney:0,
				showTrue: true,
				show: false,
				showList:false,
				transferInfo: {
					userId: null,
					total: null
				},
				list:['Transfer record','receive record'],
				type:0,
				showOther: false,
			};
		},
		mounted() {
			this.getUser()
		},
		methods: {
			async getUser() {
				const {
					data: res
				} = await this.$api('/front/getInfo', 'GET')
				// console.log(res)
				this.userInfo = res.data
			},
			async checkUser() {
				if(!this.transferInfo.userId)return uni.$u.toast(this.$t('transferGift.tips2'))
				const {
					data: res
				} = await this.$api("/front/queryUser/" + this.transferInfo.userId, "GET")
				console.log(res)
				if (res.code != 200) return uni.$u.toast(res.msg)
				this.transferInfo.userId = res.data.id
				this.touserInfo = res.data
				this.showOther = true
			},
			async sureConfirm() {
				if(!this.transferInfo.userId)return uni.$u.toast(this.$t('transferGift.tips2'))
				if(!this.transferInfo.total)return uni.$u.toast(this.$t('transferGift.tips1'))
				const {
					data: res
				} = await this.$api("/front/transfer", "POST", this.transferInfo)
				console.log(res)
				if (res.code != 200) {
					if (res.msg == this.$t('message.realname')) {
						this.showTrue = false
						this.show = true
					} else {
						uni.$u.toast(res.msg)
					}
				} else {
					this.successMoney = res.data
					this.showTrue = true
					this.show = true
				}
			},
			async toshowList(){
				const {
					data: res
				} = await this.$api("/front/transferRecord", "GET",{type:this.type+1})
				console.log(res)
				this.showList = true
				this.transferTable = res.rows
			},
			tabsChange(e){
				this.type=e
				this.toshowList()
			},
			toNavigate(url) {
				uni.navigateTo({
					url: '/pages/' + url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popbox1{
		width: 70vw;
		min-height: 40vh;
		box-sizing: border-box;
		padding: 20rpx;
		background: #212249;
		border-radius: 15rpx;
		.msg-title {
			width: 100%;
			height: 60rpx;
			font-size: 24rpx;
			display: grid;
			padding-left: 20rpx;
			box-sizing: border-box;
			grid-template-columns: 2fr 1fr 3fr;
			text-align: center;
			margin-top: 20rpx;
		}
		.scroll-y{
			height: calc(40vh - 184rpx);
			.msg-box {
				height: 91rpx;
				border-radius: 17rpx;
				color: #fff;
				font-size: 24rpx;
				line-height: 91rpx;
				display: grid;
				padding-left: 20rpx;
				box-sizing: border-box;
			    grid-template-columns: 2fr 1fr 3fr;
				text-align: center;
				margin-bottom: 10rpx;
				.color-blue{
					color: #54CCFF;
				}
				.color-red{
					color: red;
				}
			}
		}
	}
	.main {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-family: my-font;
         padding-top:100rpx;
		 padding-bottom: 40rpx;
		 box-sizing: border-box;
		 background: linear-gradient( 180deg, #000000 0%, #3C3C3C 100%);
		 .list-icon{
			 margin-left: auto; 
			 padding-right: 20rpx;
			 margin-bottom: 40rpx;
		 }
		.popbox {
			width: 617rpx;
			background-color: #21224C;
			border-radius: 65rpx;
			padding: 41rpx 0;
			padding-bottom: 80rpx;

			.pop-false {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 16rpx;

				.false-image {
					width: 176rpx;
				}

				.warning-text {
					width: 100%;
					text-align: center;
					box-sizing: border-box;
					padding: 0 41rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					font-weight: 400;
					line-height: 39rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.popbth {
					width: 455rpx;
					height: 117rpx;
					border-radius: 30rpx;

					line-height: 117rpx;
					font-size: 32rpx;
				}

				.bth-color1 {
					background-color: #2D3139;
					color: #fff;
				}

				.bth-color2 {
					background-color: #FFFFFF;
					color: #000;
				}
			}

			.pop-true {
				display: flex;
				flex-direction: column;
				align-items: center;

				.poptitle {
					font-size: 32rpx;
				}

				.center-pop {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 20rpx 0;

					.grimage {
						width: 166rpx;
					}
					.transfer{
						display: flex;
						flex-direction: column;
						gap: 12rpx;
						.nums{
							font-size: 26rpx;
							padding-left: 5rpx;
						}
					}
				}

				.popbth {
					width: 207rpx;
					height: 76rpx;
					border-radius: 30rpx;
					background-color: #fff;
					color: #000;
					line-height: 76rpx;
					font-size: 32rpx;
				}
			}

		}

		.head-box {
			width: 570rpx;
			display: flex;
			justify-content: center;
			margin-bottom: 80rpx;
			.line {
				width: 10rpx;
				height: 270rpx;
				background-color: #8D8A8F;
				margin-right: 26rpx;
				margin-left: 63rpx;
			}

			.right-text {
				width: 600rpx;
				height: 270rpx;
				display: flex;
				align-items: center;
				text-align: center;
				font-size: 26rpx;
				color: #8D8A8F;
			}

			.image-avatar {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.headimg {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.name {
					color: #fff;
					margin-top: 34rpx;
				}

				.id-name {
					color: #8D8A8F;
					margin-top: 7rpx;
				}
			}
		}

		.input-box {
			width: 570rpx;
			height: 90rpx;
			line-height: 90rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			border-radius: 17rpx;
		}

		.bth-box {
			width: 570rpx;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			font-size: 32rpx;
			border-radius: 26rpx;
			margin: 37rpx 0;
		}

		.color1 {
			background-color: #926FBF;
		}

		.color2 {
			background-color: #726FBF;
		}
	}
</style>